<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
    <title>玩家充值</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link href="../css/bootstrap-table.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/index.css" type="text/css">
    <script src="../js/lib/jquery.min.js?v=20170408"></script>
    <script src="../js/lib/jquery.cookie.js?v=20170408"></script>
    <script src="../js/lib/jsrender.js?v=20170408"></script>
    <script src="../js/lib/bootstrap.min.js?v=20170408"></script>
    <script src="../js/lib/bootstrap-table.min.js?v=20170408"></script>
    <script src="../js/lib/bootstrap-table-zh-CN.min.js?v=20170408"></script>
    <script src="../js/lib/vue.min.js?v=20170408"></script>
    <script src="../js/common.js?v=20170408"></script>
    <script src="../js/main.js?v=20170408"></script>
    <style>
        .box-title {
            font-size: 24px;
            color: #444;
            display: block;
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="productMain">
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-md-1 control-label">玩家ID</label>
                        <div class="col-md-2">
                            <input type="text" class="form-control" id="uuid" v-modal="uuid"  placeholder="请输入玩家ID" style="font-size: 12px!important;height: 30px!important;">
                        </div>
                        <label class="col-md-1 control-label">账号名称</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="name"  placeholder="请输入账号名称" style="font-size: 12px!important;height: 30px!important;">
                        </div>

                        <div class="col-md-1">
                            <button type="button" style="font-size: 14px!important;height: 30px!important;line-height: 0px;!important;border-color:#576b95;background-color: #576b95;" class="btn btn-primary pull-left" @click="turnPage(1)">搜索</button>
                        </div>
                        <!--<label class="col-md-2 control-label">三方SKU</label>-->
                        <!--<div class="col-md-2">-->
                        <!--<input type="text" class="form-control" id="selSku" placeholder="">-->
                        <!--</div>-->
                    </div>
                </form>
            </div>
        </div>

        <table id="table" class="table table-hover table-bordered">
            <thead>
            <tr>
                <span class="box-title">当前检索条件共有{{totalNum}}条数据</span>
                <th class="text-center">玩家名称</th>
                <th class="text-center">玩家ID</th>
                <th width="80px" >剩余房卡</th>
                <th width="100px" class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr v-for="account in accountList" v-if="accountList.length>0">
                <td style="width: 29px;vertical-align: middle;text-align: center;" v-text="account.nickname"></td>
                <td style="width: 59px;vertical-align: middle;text-align: center;" v-text="account.uuid"></td>
                <td style="vertical-align: middle;text-align: center;" v-text="account.roomcard"></td>
                <td style="vertical-align: middle;text-align: center;" >
                    <input type="button"  style="background-color: #c4d703;border-color: #c4d703;" @click="updateActualCard(account)" class="btn btn-primary btn-xs edit" value="充值">
                </td>
            </tr>
            <tr id="tab">

            </tr>
            </tbody>
        </table>
        <div class="footer-nav" v-if="accountList.length>0">
            <!--<ul class="pagination">-->
            <!--<li><a style="color: #428bca;" class="disableHref">总条数:{{totalNum}}</a></li>-->
            <!--</ul>-->
            <!--<ul class="pagination">-->
            <!--<li v-if="curIndex!=1"><a href="javascript:;" @click="getProductList(1)">首页</a></li>-->
            <!--<li  v-if="curIndex!=1"><a href="javascript:;" @click="prevPage">上一页</a></li>-->
            <!--<li v-for="pageIndex in pageList" v-bind:class="{'active':curIndex==parseInt(pageIndex+curNum)}"><a href="javascript:;" @click="getProductList(pageIndex+curNum)" v-text="pageIndex+curNum"></a></li>-->
            <!--<li v-if="curIndex!=totalPage"><a href="javascript:;" @click="nextPage">下一页</a></li>-->
            <!--<li v-if="curIndex!=totalPage"><a href="javascript:;" @click="getProductList(totalPage)">末页</a></li>-->
            <!--</ul>-->
            <ul class="pagination">
                <li><a style="color: #428bca;" class="disableHref">总条数:{{totalNum}}</a></li>
            </ul>
            <ul class="pagination">
                <li v-if="curIndex!=1"><a href="javascript:;"   @click="turnPage(1)" >首页</a></li>
                <li v-if="curIndex!=1"><a href="javascript:;" @click="prevPage">上一页</a></li>
                <li v-for="pageIndex in pageList" v-bind:class="{'active':curIndex==parseInt(pageIndex+curNum)}"><a href="javascript:;" @click="turnPage(pageIndex+curNum)" v-text="pageIndex+curNum"></a></li>
                <li v-if="curIndex!=totalPage"><a href="javascript:;" @click="nextPage">下一页</a></li>
                <li v-if="curIndex!=totalPage"><a href="javascript:;" @click="turnPage(totalPage)">末页</a></li>
            </ul>
        </div>
    </div>
</div>


<!--充值操作弹框--><!-- Modal -->
<div class="modal fade" id="chargeModal" tabindex="-1" role="dialog" aria-labelledby="chargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    账户充值
                </h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="form-group">
                        <label class="col-md-5 control-label" style="width: 100px;margin-left: 25px;margin-top: 8px;">充值房卡数：</label>
                        <div class="col-md-5">
                            <input type="hidden" id="userid" name="userid">
                            <input type="hidden" id="id" name="id">
                            <input type="text" class="form-control" id="playcardNum" style="font-size: 12px!important;height: 30px!important;">
                        </div>
                    </div>
                </div>
             <!--   <div class="form-group">
                    <label class="col-md-5 control-label" style="width: 100px;margin-left: 25px;">充值类型：</label>
                    <div class="col-md-5">
                        <select class="form-control" id="chargetype" style="font-size: 12px!important;height: 30px!important;width: 120px;">
                            <option value="1">赠送</option>
                            <option value="2">充值</option>
                        </select>
                    </div>
                </div>-->
            </div>
            <div class="modal-footer" style="border-top: none!important;">
                <button type="button" style="background-color: #c4d703;border-color:#c4d703;color: white;" class="btn btn-default" @click="addCardNum()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="text/javascript">
    (function(window){
        //根据屏幕宽度动态改变html的font-size大小
        //获取屏幕宽度
        var winW = document.documentElement.clientWidth||document.body.clientWidth;
        document.documentElement.style.fontSize = winW/10+"px";
        window.onresize = function(){
            var winW = document.documentElement.clientWidth||document.body.clientWidth;
            document.documentElement.style.fontSize = winW/10+"px";
        }
    })(window);
    $(function () {
       // validatePermission();
        var pag=$.getUrlParam('pag');
        if( pag == null || pag==undefined || pag==""){
            pag=1;
        }
        //浏览器带搜索参数
        var uuid = $.getUrlParam('uuid')||"";
        var name = $.getUrlParam('name')||"";
        $("#uuid").val(uuid);
        $("#name").val(name);
        //实例化一个Vue对象
        window.vm = new Vue({
            el:"body",//指的是,Vue需要监听的范围,这个地方写body是为了监听整个页面,也可以控制某一块区域
            data:{
                "accountList":[],//需要循环遍历的对象
                "pageList":[],
                "totalPage":0,
                "totalNum":0,
                "curNum":1,
                "curIndex":pag,
                "name":name,
                "uuid":uuid,
                "productRemarks":"",
                "productSku":"",
                "status":status,
                "confirmDisable":{},
                "page": "1",//当前第几页
                "limit": "20"//每页多少条
            },
            ready:function () {
                this.getAccountList(pag);//初始化,第一次进来查询商品列表
            },
            methods: {

                //充值按钮
                updateActualCard:function (account) {
                    $("#chargeModal").modal("show");
                    this.account = account;
                    $("#userid").val(account.uuid);
                    $("#id").val(account.id);
                },
                //点击保存按钮接口请求
                addCardNum:function(){
                    var _this = this;
                    var param = {
                        "id": $("#id").val(),
                        "userid":$("#userid").val(),
                        "playCardNum":$("#playcardNum").val(),
                        "chargetype": '2'
                    };
                    if($("#playcardNum").val() == ""){
                        common.lightBox.showMessage("请输入房卡数");
                        return false;
                    }
                    if(isNaN($("#playcardNum").val())){
                        common.lightBox.showMessage(" 请输入数字!");
                        return false;
                    }
                    $.ajax({//编辑cookie
                        url:majiangurl+"/account/addActualCard",
                        type:"post",
                        xhrFields: {
                            withCredentials: true
                        },
                        crossDomain: true,
                        dataType: "json",
                        data:{
                            "str" : JSON.stringify(param)
                        },
                        success: function (res) {
                            if(res.status=="200"){
                                common.lightBox.showMessage(" 充值成功!");
                                $("#chargeModal").modal("hide");
                                _this.getAccountList(1);
                            }else {
                                common.lightBox.showMessage('充值失败,请检查余额');
                            }
                        }
                    });
                },
                pageInit:function (pageNum) {
                    if(pageNum==1 || 9+pageNum-5<this.totalPage || this.totalPage<=11){
                        if(this.totalPage<=11){
                            this.curNum = 1;
                        }else if(pageNum-5>0){
                            this.curNum = pageNum-5;
                        }else if(this.totalPage>11){
                            this.curNum = 1;
                        }
                    }else if(pageNum>1){
                        if(pageNum-5>0){
                            this.curNum = this.totalPage-10;
                        }
                    }
                    this.curIndex = parseInt(pageNum);
                },
                setPage:function (totalNum,pageNum) {
                    //根据一页10条,计算一共有多少页
                    this.totalPage = Math.ceil(totalNum/20);
                    if(this.totalPage<12){
                        //如果不满11页,那么保存当前的总页数,比如可能只有5页,那么totalPage=5
                        this.pageList = this.totalPage;
                    }else{
                        this.pageList = 11;//默认最多显示11页
                    }
                    this.pageInit(pageNum);
                },
                //查询玩家列表
                getAccountList: function (pageNum) {
                    var _this = this;
                    common.lightBox.showLoading();
                    //接口请求
                    $.postRequest(majiangurl + "account/searchAccountList", {
                        "str" : JSON.stringify({
                            "name":this.name,
                            "uuid": this.uuid,
                            "page": parseInt(this.curIndex),
                            "limit": "20",
                        })
                    }, function (res) {
                        common.lightBox.hideLoading();
                       if(res.status == '200'){
                            if (res.result.rows.length != 0) {
                                //把接口返回的值保存到userList中
                                _this.accountList = res.result.rows;
                                _this.setPage(res.result.count,parseInt(pageNum));
                                _this.totalNum = res.result.count;
                                //_this.pageInit(pageNum);
                                $("#tab").empty();
                            }
                        }else{
                            _this.totalNum = 0;
                            $("#tab").html('<td style="font-size: 20px;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;text-align: center;"colspan="6">没有数据</td>')
                            _this.accountList = [];
                        }

                    })
                },
                prevPage:function () {
                    if(this.curIndex==1){
                        return;
                    }
//                    this.getProductList(this.curIndex-1);
                    this.turnPage(this.curIndex-1);

                },
                nextPage:function () {
                    if(this.curIndex==this.totalPage){
                        return;
                    }
//                    this.getProductList(this.curIndex+1);
                    this.turnPage(this.curIndex+1);
                },
                turnPage:function(pageNo){
                    //this.pageInit(pageNo);
                    var name = $("#name").val() || ""
                    var uuid = $("#uuid").val() || "";
                    window.location.href = window.location.pathname +"?pag="+pageNo+"&name="+name+"&uuid="+uuid;

                }
            }
        });
    })
</script>
</body>
</html>